{% extends base.html %}

{% block head %}

<link rel="stylesheet" href="/static/lib/codemirror/codemirror.min.css">
<link rel="stylesheet" type="text/css" href="/static/lib/codemirror/theme/monokai.min.css">
<script type="text/javascript" src="/static/lib/codemirror/codemirror.min.js"></script>
<script type="text/javascript" src="/static/lib/codemirror/mode/clike/clike.js"></script>
<script type="text/javascript" src="/static/lib/codemirror/mode/shell.js"></script>
<script type="text/javascript" src="/static/lib/codemirror/mode/python.js"></script>

<style type="text/css">
    #result {
        border: 1px solid #ccc;
        padding: 4px;
        background-color: #9cc;
        box-sizing: border-box;
    }
    #scriptName {
        width: 200px;
    }
    #resultDiv {
        display: none;
    }

    tr:hover td {
        background: none;
    }

    tr:hover {
        background-color: #eee;
    }
</style>

{% end %}

{% block body %}

{% init error = "" %}
{% init shell_list = [] %}
{% set  index = 1 %}
{% init op = "list" %}

<div class="col-md-12">
    <a href="/system/script" class="tab-link">脚本</a>
    <a href="/system/crontab" class="tab-link">定时任务</a>
</div>

{% if op != "edit" %}
<div>
<form action="/system/script/search" method="GET">
    <input type="text" id="scriptName" name="name" value="{{?name}}">
    <button>搜索</button>
    <input type="button" value="添加" id="addBtn"/>
</form>
</div>
{% end %}

{% if op == "edit" %}
    <h3>{{name}}</h3>
    {# 编辑 #}
    <form method="POST" action="/system/script_admin/save">
        <div id="editorArea" class="col-md-12">
            <input type="text" name="name" value="{{name}}" class="hide">
            <textarea id="editor" class="col-md-12" name="content" rows=10>{{content}}</textarea>
        </div>
        <div class="col-md-12">
            <button id="save" class="btn">保存</button>
            <input type="button" scriptName="{{name}}" class="executeScript btn" value="执行"/>
        </div>
    </form>

    <div id="resultDiv" class="col-md-12">
        结果
        <pre id="result" class="col-md-12">
        </pre>
    </div>

    <script>
        $(function () {

            var mode = "text/x-sh";
            var name = $("input[name=name]").val();
            if (name.endsWith(".py")) {
                mode = "text/x-python";
            }
            var editor = CodeMirror.fromTextArea($("#editor")[0], {
                lineNumbers: true,
                mode: mode,
                // theme:"monokai",
                indentUnit:4,
                lineWrapping: true
            });
            editor.setSize("auto", "450px");
            editor.on("update", function (codeMirror, changeObj) {
                $("#editor").val(codeMirror.doc.getValue());
            });
            editor.setOption("extraKeys", {
                Tab: function(cm) {
                    var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
                    cm.replaceSelection(spaces);
                }
            });
        });
    </script>

{% else %}
    {% comment 列表 %}
    <div class="error">{{error}}</div>
    <table class="table col-md-12 top-offset-1">
        {% for index, script in enumerate(shell_list) %}
            <tr>
                <td class="row-no">{{index+1}}</td>
                <td>
                    <input type="button" value="执行" class="executeScript btn" scriptName="{{script}}"/> 
                    <input type="button" value="删除" class="deleteScript btn btn-danger" scriptName="{{script}}"/>
                    <a href="/system/script_admin/edit?name={{script}}">{{script}}</a>
                </td>
            </tr>
        {% end %}
    </table>
{% end %}

<script type="text/javascript">
    $(".executeScript").on("click", function(event) {
        var scriptName = $(event.target).attr("scriptName")
        var content = $("[name=content]").val();
        // console.log(event);
        // console.log($(event.target).attr("scriptName"))
        $.post("/system/script_admin/execute?name=" + scriptName, function (responseText) {
            var data = responseText;
            $("#resultDiv").show();
            $("#result").show().text(data.data);
        });
    })

    $(".deleteScript").on("click", function(event) {
        var scriptName = $(event.target).attr("scriptName")
        var check = confirm("确认删除 " + scriptName + " ?")
        if (check) {        
            $.post("/system/script_admin/delete?name=" + scriptName, function (data) {
                location.reload();
            });
        }
    });

    $("#addBtn").click(function () {
        var name = $("#scriptName").val();
        $.get("/system/script_admin?op=add&name=" + name, function () {
            location.reload();
        });
    })
</script>

{% end %}

